<template>
  <view class="canvas-box">
    <canvas class="myCanvas" canvas-id="myCanvas" />

    <button class="download-btn" @click="onSave">下载海报</button>
    <view class="btn-box">
      <view class="close-button" @click="onClose">
        <view class="icon-x"></view>
      </view>
    </view>
  </view>
</template>

<script>
import { createPoster, savePoster } from '@/utils/canvas'

export default {
  props: {

    width: {
      type: Number,
      required: true,
    },
    height: {
      type: Number,
      required: true,
    }
  },
  
  data() {
    return {
      showPosition: {
        left: 0,
        top: 0,
      },
      hidePosition: {
        left: -9999,
        top: 0,
      }
    }
  },
  
  methods: {
    onDraw(options, callback) {
      createPoster.call(
        // 当前上下文
        this,
        // canvas相关信息
        {
          id: 'myCanvas',
          width: this.width,
          height: this.height,
        },
        // 元素集合
        options,
        // 回调函数
        callback,
      )
    },
    
    onSave(callback) {
      this.$emit('save')
      savePoster.call(this, 'myCanvas', callback)
    },
    
    onClose() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.canvas-box {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  // align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
}

// 隐藏canvas
.myCanvas {
  // canvas宽度
  width: 100%;
  // canvas高度
  height: 100%;
}

.download-btn {
  width: 380rpx;
  height: 100rpx;
  margin: 60rpx auto 70rpx;
  font-size: 36rpx;
  line-height: 100rpx;
  color: #57bd6a;
}
.btn-box {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
.close-button {
  position: relative;
  bottom: 20px;
  display: inline-block;
  width: 60rpx; /* 调整大小 */
  height: 60rpx;
  border: 1px solid #ffffff;
  border-radius: 50%; /* 创建圆形 */
}

.icon-x {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px; /* 调整"X"的大小 */
  background-color: #fff; /* "X"的颜色 */
  transform: translate(-50%, -50%); /* 居中 */
}

.icon-x:before,
.icon-x:after {
  position: absolute;
  width: 100%; /* 调整"X"的大小 */
  height: 2px; /* "X"的线宽 */
  content: '';
  background-color: inherit;
}

.icon-x:before {
  transform: rotate(45deg);
}

.icon-x:after {
  transform: rotate(-45deg);
}
</style>